<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE   html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/function.js"></script>
    <script type="text/javascript" src="../scripts/jquery-1.8.3.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif" /></div>
    <div class="help"><a href="GetUserShoppingServlet" class="shopping">购物车</a>欢迎${Curr_User.username}<a href="ZhuXiaoServlet">切换用户</a><a href="guestbook.html">留言</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="index.jsp">首页</a></li>
            <li><a href="GetProductServlet?epcname=图书">图书</a></li>
            <li><a href="GetProductServlet?epcname=百货">百货</a></li>
            <li><a href="GetProductServlet?epcname=品牌">品牌</a></li>
            <li><a href="GetProductServlet?epcname=促销">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="GetProductServlet?epcname=音乐">音乐</a></li>
            <li><a href="GetProductServlet?epcname=影视">影视</a></li>
            <li><a href="GetProductServlet?epcname=少儿">少儿</a></li>
            <li><a href="GetProductServlet?epcname=动漫">动漫</a></li>
            <li><a href="GetProductServlet?epcname=小说">小说</a></li>
            <li><a href="GetProductServlet?epcname=外语">外语</a></li>
            <li><a href="GetProductServlet?epcname=相机">数码相机</a></li>
            <li><a href="GetProductServlet?epcname=笔记本">笔记本</a></li>
            <li><a href="GetProductServlet?epcname=羽绒服">羽绒服</a></li>
            <li><a href="GetProductServlet?epcname=秋冬靴">秋冬靴</a></li>
            <li><a href="GetProductServlet?epcname=运动鞋">运动鞋</a></li>
            <li><a href="GetProductServlet?epcname=化妆品">美容护肤</a></li>
            <li><a href="GetProductServlet?epcname=家纺用品">家纺用品</a></li>
            <li><a href="GetProductServlet?epcname=奶粉">婴幼奶粉</a></li>
            <li><a href="GetProductServlet?epcname=饰品">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="index.jsp">易买网</a> &gt; 阅读新闻
</div>
<div id="main" class="wrap">
    <div class="left-side" style="overflow: hidden">
        <div class="news-list">
            <h4>促销大卖</h4>
            <ul id="cuxiaolinews">

            </ul>
            <a href="javascript:void(0)" onclick="cuxiaogengduo()">
                <div style="float: right">更多+</div>
            </a>
        </div>
        <div class="spacer"></div>
        <div class="news-list">
            <h4>温馨提示</h4>
            <ul id="gonggaolinews">

            </ul>
            <a href="javascript:void(0)" onclick="gonggaogengduo()">
                <div style="float: right">更多+</div>
            </a>
        </div>
    </div>
</div>
<div style=" width:60%;">
<div id ="d" class="main" style="width: 60%;display: inline; position: absolute">
    <h2>&nbsp;&nbsp;新闻管理&nbsp;<input type="text" size="30" placeholder="请输入关键字" id="keyword">
        <input type="button" value="搜索" sousuo="cuxiao" id="keywords"/></h2>
    <div class="manage">
        <table class="list" id="tbnews">
            <tr>
                <td colspan="2" width="50%" class="bankuai" id="cuxiao" style="background-color: #fc7e31">促销信息</td>
                <td colspan="2" width="50%" class="bankuai" id="gonggao" style="background-color: #fc7e31">公告新闻</td>
            </tr>
            <tr>
                <th>&nbsp;&nbsp;ID</th>
                <th>新闻标题</th>
                <th>发布时间</th>
                <th>关注</th>
            </tr>
        </table>
        <a href="javascript:void (0)" id="firstpage" class="pages" fenye='CuXiaoFenYe'>首页</a>
        <a href="javascript:void (0)" id="prevpage" class="pages" fenye='CuXiaoFenYe'>上一页</a>
        <a href="javascript:void (0)" id="nextpage" class="pages" fenye='CuXiaoFenYe'>下一页</a>
        <a href="javascript:void (0)" id="lastpage" class="pages" fenye='CuXiaoFenYe'>尾页</a>
    </div>
</div>
<div id="news" class="right-main" style=" width:60%;display: none;position: absolute">
    <iframe name="mainiframe" frameborder="0" width="100%" height="800px"></iframe>
</div>
</div>
<div class="clear"></div>
</div>

<div id="footer">
    Copyright &copy; 2018 云和数据 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>
<script type="text/javascript">
    var pageIndex;//当前页
    var totalPage;//总页数


    $(function () {
        //页面加载时列表信息
        getliCuXiaoNews(1);
        getliGongGaoNews(1);


        //页面加载时加载促销信息
        getCuXiaoNews();
        cuxiaofenye();
        cuxiaosousuo();


        //板块选择变化
        $("#cuxiao").click(function () {
            $(".bankuai").css("background-color", "#fc7e31");
            $("#cuxiao").css("background-color", "white");

            $(".pages").attr("fenye", "CuXiaoFenYe");
            $("#keywords").attr("sousuo", "cuxiao");
            cuxiaosousuo();
            getCuXiaoNews(1);
            cuxiaofenye();

        })


        $("#gonggao").click(function () {
            $(".bankuai").css("background-color", "#fc7e31");
            $("#gonggao").css("background-color", "white");
            /*  $(".pages").removeAttribute("fenye")*/
            $(".pages").attr("fenye", "GongGaoFenYe");
            $("#keywords").attr("sousuo", "gonggao");
            gonggaosousuo();
            getGongGaoNews(1);
            gonggao();
        })


    })

    //促销信息分页
    function cuxiaofenye() {
        $("[fenye='CuXiaoFenYe']").unbind()
        $("[fenye='CuXiaoFenYe']").on("click", function () {
            var pageflag = $(this).attr("id")

            if (pageflag == "firstpage") {
                getCuXiaoNews(1);
            } else if (pageflag == "prevpage") {
                pageIndex--;
                if (pageIndex < 1) {
                    pageIndex = 1;
                }
                getCuXiaoNews(pageIndex);
            } else if (pageflag == "nextpage") {
                pageIndex++;
                if (pageIndex > totalPage) {
                    pageIndex = totalPage;
                }
                getCuXiaoNews(pageIndex);
            } else if (pageflag == "lastpage") {
                getCuXiaoNews(totalPage);
            }
        })
    }

    //公告信息分页
    function gonggao() {
        $("[fenye='GongGaoFenYe']").unbind();
        $("[fenye='GongGaoFenYe']").on("click", function () {
            var pageflag = $(this).attr("id")

            if (pageflag == "firstpage") {
                getGongGaoNews(1);
            } else if (pageflag == "prevpage") {
                pageIndex--;
                if (pageIndex < 1) {
                    pageIndex = 1;
                }
                getGongGaoNews(pageIndex);
            } else if (pageflag == "nextpage") {
                pageIndex++;
                if (pageIndex > totalPage) {
                    pageIndex = totalPage;
                }
                getGongGaoNews(pageIndex);
            } else if (pageflag == "lastpage") {
                getGongGaoNews(totalPage);
            }
        })
    }


    //异步分页获取促销信息
    var getCuXiaoNews = function (curr) {
        $.ajax({
            type: 'POST',
            url: '../CuXiaoNewsJsonServlet',
            dataType: 'JSON',
            data: {
                keyword: $("#keyword").val(),
                pageIndex: curr || 1
            },
            success: function (data) {
                $("#tbnews").find(".contextdata").remove();
                $("#tbnews").find(".page").remove();
                $.each(data.newsList, function (index, obj) {
                    var $newsStr = "<tr class='contextdata'><td class='first w4 c'>" + obj.enid + "</td><td  style='text-align:center'><a href='NewsViewServlet?enid=" + obj.enid + "' target='mainiframe' onclick='changetb()'>" + obj.entitle + "</a></td><td>" + obj.encreatetime + "</td><td class='w1 c'></td></tr>";
                    $("#tbnews").append($newsStr);
                })
                var $pageinfor = "<tr class='page'><td colspan=4>共有<span id='total_page'>" + data.totalPages + "<span>页&nbsp;" + data.totalRows + "条记录&nbsp;当前为第<span id='curr_page'>" + data.pageIndex + "</span>页</td></tr>"
                $("#tbnews").append($pageinfor);

                totalPage = data.totalPages;
                pageIndex = data.pageIndex;
            }
        })
    }


    //异步分页获取公告信息
    var getGongGaoNews = function (curr) {
        $.ajax({
            type: 'POST',
            url: '../GongGaoNewsJsonServlet',
            dataType: 'JSON',
            data: {
                keyword: $("#keyword").val(),
                pageIndex: curr || 1
            },
            success: function (data) {
                $("#tbnews").find(".contextdata").remove();
                $("#tbnews").find(".page").remove();
                $.each(data.newsList, function (index, obj) {
                    var $newsStr = "<tr class='contextdata'><td class='first w4 c'>" + obj.enid + "</td><td  style='text-align:center'><a href='NewsViewServlet?enid=" + obj.enid + "' target='mainiframe' onclick='changetb()'>" + obj.entitle + "</a></td><td>" + obj.encreatetime + "</td><td class='w1 c'></td></tr>";
                    $("#tbnews").append($newsStr);
                })
                var $pageinfor = "<tr class='page'><td colspan=4>共有<span id='total_page'>" + data.totalPages + "<span>页&nbsp;" + data.totalRows + "条记录&nbsp;当前为第<span id='curr_page'>" + data.pageIndex + "</span>页</td></tr> "
                $("#tbnews").append($pageinfor);

                totalPage = data.totalPages;
                pageIndex = data.pageIndex;
            }
        })
    }

    //促销关键词搜索
    function cuxiaosousuo() {
        $("[sousuo='cuxiao']").unbind()
        $("[sousuo='cuxiao']").on("click", function () {
            getCuXiaoNews(1);
        })
    }

    //公告关键字搜索
    function gonggaosousuo() {
        $("[sousuo='gonggao']").unbind()
        $("[sousuo='gonggao']").on("click", function () {
            getGongGaoNews(1);
        })
    }


    //异步获取促销信息
    var getliCuXiaoNews = function (curr) {
        $.ajax({
            type: 'POST',
            url: '../CuXiaoNewsJsonServlet',
            dataType: 'JSON',
            data: {
                keyword: $("#keyword").val(),
                pageIndex: curr || 1
            },
            success: function (data) {
                $("#cuxiaolinews").find(".contextdatali").remove();
                $.each(data.newsList, function (index, obj) {
                    var $newsStr = "<li class='contextdatali'><a href='NewsViewServlet?enid=" + obj.enid + "' target='mainiframe' onclick='changeli()'>" + obj.entitle + "</a></li>";
                    $("#cuxiaolinews").append($newsStr);
                })
            }
        })
    }

    //异步获取公告信息
    var getliGongGaoNews = function (curr) {
        $.ajax({
            type: 'POST',
            url: '../GongGaoNewsJsonServlet',
            dataType: 'JSON',
            data: {
                keyword: $("#keyword").val(),
                pageIndex: curr || 1
            },
            success: function (data) {
                $("#gonggaolinews").find(".contextdatali").remove();
                $.each(data.newsList, function (index, obj) {
                    var $newsStr = "<li class='contextdatali'><a href='NewsViewServlet?enid=" + obj.enid + "' target='mainiframe' onclick='changeli()'>" + obj.entitle + "</a></li>";
                    $("#gonggaolinews").append($newsStr);
                })

            }
        })
    }

    // 点击更多促销板块变化
    function cuxiaogengduo() {
        $(".bankuai").css("background-color", "#fc7e31");
        $("#cuxiao").css("background-color", "white");

        $(".pages").attr("fenye", "CuXiaoFenYe");
        $("#keywords").attr("sousuo", "cuxiao");
        changeligengduo();
        cuxiaosousuo();
        getCuXiaoNews(1);
        cuxiaofenye();
    }

    //点击更多新闻板块变化
    function gonggaogengduo() {
        $(".bankuai").css("background-color", "#fc7e31");
        $("#gonggao").css("background-color", "white");
        /*  $(".pages").removeAttribute("fenye")*/
        $(".pages").attr("fenye", "GongGaoFenYe");
        $("#keywords").attr("sousuo", "gonggao");
        changeligengduo();
        gonggaosousuo();
        getGongGaoNews(1);
        gonggao();
    }

    //点击列表触发,更改新闻展示,列表消失
    function changeli(){
        $("#d").css("display","none");
        $("#news").css("display","inline");
    }
    //点击更多触发.更改列表展示,新闻消失
    function changeligengduo(){
        $("#d").css("display","inline");
        $("#news").css("display","none");
    }
    //点击列表标题触发,更改新闻展示列表消失
    function changetb(){
        $("#d").css("display","none");
        $("#news").css("display","inline");
    }
</script>
